<template>
    <div v-loading="loading">
        <el-tabs type="card" :value="activeName">
            <el-tab-pane v-if="data.detail.completed === false" :label="$i18n.t('FOLLOW_STATUS')" name="first">
                <el-form :model="mdl" class="demo-form-inline" label-width="100px">
                    <el-form-item :label="$i18n.t('APPROVE_FOLLOW_STATUS')">
                        <el-radio-group v-model="mdl.status">
                            <el-radio v-for="(item, index) in statusList" :label="item.value" :key="index">{{ item.label }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item :label="$i18n.t('REMARK')">
                        <el-input type="textarea" v-model="mdl.remark" :rows="2" :placeholder="$i18n.t('PLEASE_INPUT', { value: $i18n.t('REMARK') })"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit" :loading="btnLoading" :disabled="mdl.status === 0">{{ $i18n.t('SAVE') }}</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane :label="$i18n.t('APPROVE_RECORD')" name="second">
                <el-table border style="width: 100%;" :data="data.record">
                    <el-table-column align="center" prop="record_time" :label="$i18n.t('OPERATE_TIME')"></el-table-column>
                    <el-table-column align="center" prop="approver" :label="$i18n.t('APPROVE_STAFF')"></el-table-column>
                    <el-table-column align="center" prop="status" :label="$i18n.t('APPROVE_STATUS')"></el-table-column>
                    <el-table-column align="center" prop="remark" :label="$i18n.t('REMARK')"></el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane :label="$i18n.t('APPROVE_TRACK')" name="third">
                <el-table border style="width: 100%;" :data="data.track">
                    <el-table-column align="center" prop="record_time" :label="$i18n.t('OPERATE_TIME')"></el-table-column>
                    <el-table-column align="center" prop="operator" :label="$i18n.t('OPERATOR')"></el-table-column>
                    <el-table-column align="center" prop="approver" :label="$i18n.t('APPROVE_STAFF')"></el-table-column>
                    <el-table-column align="center" prop="type" :label="$i18n.t('OPERATOR_TYPE')"></el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import { getApproveDetail, handleApproveTask } from '@/api/approve'

    export default {
        name: 'ApproveFollow',
        data () {
            return {
                mdl: {
                    status: 0,
                    remark: ''
                },
                loading: false,
                btnLoading: false,
                query: {},
                data: {
                    detail: {
                        completed: true
                    },
                    record: [],
                    track: []
                }
            }
        },
        watch: {
            query () {
                this.loading = true
                const { id } = this.query
                getApproveDetail(id, { method: 'FollowRecord' }).then(res => {
                    const { result } = res
                    this.data = result
                }).finally(() => {
                    this.loading = false
                })
            }
        },
        activated () {
            this.query = this.$route.query
        },
        created () {
            this.query = this.$route.query
        },
        computed: {
            activeName () {
                return this.data.detail.completed === true ? 'second' : 'first'
            },
            statusList () {
                return this.$store.getters.options.ApproveFollowStatusList
            }
        },
        methods: {
            onSubmit () {
                this.btnLoading = true
                const { id } = this.query
                handleApproveTask(id, { method: 'FollowStatus', ...this.mdl }).then(res => {
                    this.$Message.success(this.$i18n.t('HANDLE_SUCCESS'))
                }).finally(() => {
                    this.query = {}
                    this.btnLoading = false
                    this.query = this.$route.query
                })
            }
        }
    }
</script>

<style scoped>

</style>
